<template>
  <vis-container class="student-comp" :title="`${title}参评数量分布图-学生`" title-bg-size="544">
    <LineChart
      :data="chartData"
      :color="color"
      :data-zoom-end="30"
      :judge-width="true"
      :unit="unit"
    />
  </vis-container>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import CommonMixins from './commonMixins'

@Component({
  name: 'StudentComp',
  mixins: [CommonMixins]
})
export default class StudentComp extends Vue {
  @Prop({
    type: String
  })
  title!: string
  chartData: { [key: string]: any } = {
    columns: [],
    rows: []
  }
  color = [
    '#0088D0',
    '#31C5E9',
    '#67E0E3',
    '#9FE6B8',
    '#FFDB5C',
    '#FF9F7F',
    '#FF5880',
    '#FF8AD1',
    '#A059C0'
  ]

  get unit() {
    return this.title === '各学校' ? ' ' : '个'
  }

  transformData(data: any) {
    const { student_atlas_abscissa = [], student_atlas_grade = [], student_atlas_data = [] } = data
    const columns: string[] = ['省份', ...student_atlas_grade]
    const rows = student_atlas_abscissa.map((province: string, index: number) => {
      const obj = student_atlas_grade.reduce((pre: any, cur: any, ind: number) => {
        pre[cur] = student_atlas_data[ind][index]
        return pre
      }, {})
      return {
        省份: province,
        ...obj
      }
    })
    this.chartData = {
      columns,
      rows
    }
  }
}
</script>
<style lang="scss" scoped></style>
